import React, { useState, useEffect } from "react"
import "./EditUser.css"
import { connect } from "react-redux"
import instance from "../../utils/instance"
import { getCookie } from "../../utils/cookie"
import $ from "jquery"

function EditUser(props) {
    const [gender, setGender] = useState("male")
    const [headline, setHeadline] = useState("")
    const [username, setUsername] = useState("")
    const [location, setLocation] = useState("")
    const [business, setBusiness] = useState("")
    useEffect(() => {
        if (props.userInfo.username) {
            let user = props.userInfo
            setGender(user.gender)
            setHeadline(user.headline)
            setUsername(user.username)
            setLocation(user.locations)
            setBusiness(user.business)
        }
    }, [props.userInfo])

    const changeEdit = (e) => {
        $(e.target).hide().siblings().fadeIn(500)
    }
    const closeEdit = (e) => {
        $(e.target).parent().hide().siblings().fadeIn(500)
    }
    const changeGender = (e) => {
        let thisGender = $(e.target).parent().find("input:radio[name='gender']:checked").val()
        setGender(thisGender)
    }

    const submitUpdate = (e) => {
        let _id = props.userInfo._id
        let token = getCookie("token")
        instance.defaults.headers.common['Authorization'] = "Bearer " + token
        if (_id) {
            instance.patch(`/users/update/${_id}`, {
                gender,
                username,
                locations: location,
                business,
                headline
            }).then(data => {
                if (data.data.errno === 0) {
                    alert("更新成功!")
                    props.returnInfo(false)
                    window.location.reload()
                } else {
                    alert("更新失败，请重新尝试!")
                }
            }).catch(err => {
                alert("更新失败，请重新尝试!")
            })
        }
    }
    return (
        <div className="edit_user_info">
            <div className="edit_user_head">
                <p onClick={(e) => { props.returnInfo(false) }}>返回我的信息栏</p>
            </div>
            <div className="user_info_main">
                <ul>
                    <li>
                        <div className="user_info_label">
                            <span>性别: </span>
                        </div>
                        <div className="user_info_main">
                            <span onClick={(e) => { changeEdit(e) }}>{gender === "male" ? "男" : "女"}</span>
                            <div className="user_info_edit_input">
                                <label><input type="radio" name="gender" value="male" /> 男</label>
                                <label><input type="radio" name="gender" value="female" /> 女</label>
                                <input type="button" value="保存" onClick={(e) => { changeGender(e) }} />
                                <input type="button" value="取消" onClick={(e) => { closeEdit(e) }} />
                            </div>
                        </div>
                    </li>
                    <li>
                        <div className="user_info_label">
                            <span>一句话描述: </span>
                        </div>
                        <div className="user_info_main">
                            <span onClick={(e) => { changeEdit(e) }}>{headline}</span>
                            <div className="user_info_edit_input">
                                <input type="text" required />
                                <input type="button" value="保存" onClick={(e) => { setHeadline($(e.target).parent().find("input:text").val()); closeEdit(e) }} />
                                <input type="button" value="取消" onClick={(e) => { closeEdit(e) }} />
                            </div>
                        </div>
                    </li>
                    <li>
                        <div className="user_info_label">
                            <span>用户名: </span>
                        </div>
                        <div className="user_info_main">
                            <span onClick={(e) => { changeEdit(e) }}>{username}</span>
                            <div className="user_info_edit_input">
                                <input type="text" required />
                                <input type="button" value="保存" onClick={(e) => { setUsername($(e.target).parent().find("input:text").val()); closeEdit(e) }} />
                                <input type="button" value="取消" onClick={(e) => { closeEdit(e) }} />
                            </div>
                        </div>
                    </li>
                    <li>
                        <div className="user_info_label">
                            <span>居住地: </span>
                        </div>
                        <div className="user_info_main">
                            <span onClick={(e) => { changeEdit(e) }}>{!location ? "无" : location}</span>
                            <div className="user_info_edit_input">
                                <input type="text" required />
                                <input type="button" value="保存" onClick={(e) => { setLocation($(e.target).parent().find("input:text").val()); closeEdit(e) }} />
                                <input type="button" value="取消" onClick={(e) => { closeEdit(e) }} />
                            </div>
                        </div>
                    </li>
                    <li>
                        <div className="user_info_label">
                            <span>职业: </span>
                        </div>
                        <div className="user_info_main">
                            <span onClick={(e) => { changeEdit(e) }}>{!business ? "无" : business}</span>
                            <div className="user_info_edit_input">
                                <input type="text" required />
                                <input type="button" value="保存" onClick={(e) => { setBusiness($(e.target).parent().find("input:text").val()); closeEdit(e) }} />
                                <input type="button" value="取消" onClick={(e) => { closeEdit(e) }} />
                            </div>
                        </div>
                    </li>
                </ul>
                <div className="submitUpdate">
                    <input type="button" value="提交更新" onClick={(e) => { submitUpdate(e) }} />
                </div>
            </div>
        </div>
    )
}

const mapstateToProps = (state) => {
    return {
        userInfo: state.home.userInfo
    }
}

export default connect(mapstateToProps, null)(EditUser)